<template>
  <div class="warehouseCheckAdd">
    <div v-show="pageType==1">
      <el-checkbox v-model="isImage">显示图片</el-checkbox>
      <table class="table" rules="all" border="1">
        <tr>
          <td>盘点仓库</td>
          <td>
            <el-select v-model="addForm.checkWarehouse" placeholder="请选择" ref="selectReport">
              <el-option :value="addForm.checkWarehouseId" :label="addForm.checkWarehouse" style="height: auto;">
                <el-tree :data="checkWarehouse" :props="defaultProps" @node-click="handleCheckChange"></el-tree>
              </el-option>
            </el-select>
          </td>
          <td>盘点日期</td>
          <td>
            <el-date-picker
              v-model="addForm.checkDate"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="3">
            <el-input v-model="addForm.remark" type="textarea" :role="2"></el-input>
          </td>
        </tr>
      </table>
      <el-table ref="multipleTable" border tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column type="index" label="序号" width="55"/>
        <el-table-column label="图片"  prop=""/>
        <el-table-column label="产品编号"  prop=""/>
        <el-table-column label="产品名称"  prop=""/>
        <el-table-column label="单位"  prop=""/>
        <el-table-column label="规格型号"  prop=""/>
        <el-table-column label="品牌"  prop=""/>
        <el-table-column label="库存数量"  prop=""/>
        <el-table-column label="盘点数量"  prop=""/>
        <el-table-column label="盘点差异"  prop=""/>
      </el-table>
      <div class="btn">
        <el-button size="mini" type="primary" @click="nextStep">下一步</el-button>
      </div>
    </div>
    <div v-if="pageType==2">
      <h4>盘盈列表<el-checkbox v-model="isImage">是否生成盘盈入库单</el-checkbox></h4>
      <el-table ref="multipleTable" border tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column type="index" label="序号" width="55"/>
        <el-table-column label="产品编号"  prop=""/>
        <el-table-column label="产品名称"  prop=""/>
        <el-table-column label="单位"  prop=""/>
        <el-table-column label="库存数量"  prop=""/>
        <el-table-column label="盘点数量"  prop=""/>
        <el-table-column label="盘点差异"  prop=""/>
      </el-table>
      <pagination
        :total="total"
        :page.sync="selectForm.pageNum"
        :limit.sync="selectForm.pageSize"
        @pagination="getList"
      />
      <h4>盘亏列表<el-checkbox v-model="isImage">是否生成盘亏出库单</el-checkbox></h4>
      <el-table ref="multipleTable" border tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column type="index" label="序号" width="55"/>
        <el-table-column label="产品编号"  prop=""/>
        <el-table-column label="产品名称"  prop=""/>
        <el-table-column label="单位"  prop=""/>
        <el-table-column label="库存数量"  prop=""/>
        <el-table-column label="盘点数量"  prop=""/>
        <el-table-column label="盘点差异"  prop=""/>
      </el-table>
      <pagination
        :total="total"
        :page.sync="selectForm.pageNum"
        :limit.sync="selectForm.pageSize"
        @pagination="getList"
      />
      <div class="btn">
        <el-button size="mini" type="primary" @click="lastStep">上一步</el-button>
        <el-button size="mini" type="primary" @click="submit">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {treeselect} from "@/api/system/dept";
  export default {
    name: "warehouseCheckAdd.vue",
    data() {
      return {
        pageType: 1,//
        isImage: false,
        addForm: {
          checkWarehouse: undefined,
          checkWarehouseId: '',
          checkDate: '',
          remark: '',
        },
        checkWarehouse: [],
        defaultProps: {
          children: "children",
          label: "label"
        },
        selectForm:{
          pageNum: 1,
          pageSize: 10,
        },
        total:2,
      }
    },
    created() {
      this.getTreeselect();
    },
    methods: {
      getList(){

      },
      getTreeselect() {
        treeselect().then(response => {
          this.checkWarehouse = response.data;
        });
      },
      handleCheckChange(data) {
        this.addForm.checkWarehouseId = data.id
        this.addForm.checkWarehouse = data.label
        //console.log(this.addForm);
        this.$refs.selectReport.blur()
      },
      //选中多选框的数据
      handleSelectionChange(){

      },
      //上一步
      lastStep(){
        this.pageType=1;
      },
      //下一步
      nextStep(){
        if(!this.addForm.checkWarehouse){
          this.$message.error('请选择');
          return
        }
        this.pageType=2;
      },
      submit(){
        this.$message.success('添加成功！')
        this.$router.push({path:'/consumable/warehouseCheck'});
      }

    }
  }
</script>

<style lang="scss">
  .warehouseCheckAdd {
    margin-left: 20px;
    margin-top: 20px;
    h4 {
      color: #05A380;
      .el-checkbox{
        padding-left:10px;
        color:#05A380;
      }
      .el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #05A380;
        border-color: #05A380;
      }
      .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #05A380;
      }
    }
    .btn {
      text-align: center;
      width: 900px;
      margin-top: 20px;
    }
    .el-table{
      margin-top: 20px;
    }
    .table {
      border: 1px solid #cccccc;
      color: #606266;
      font-size: inherit;
      width: 900px;
      margin-top: 10px;

      tr {
        td:nth-child(2n-1) {
          width: 150px;
          text-align: center;
        }

        td:nth-child(2n) {
          width: 300px;
          padding-left: 10px;
        }

        td {
          line-height: 35px;

          .el-input--medium .el-input__inner, .el-textarea .el-textarea__inner {
            border: none;
          }
        }
      }
    }
  }
</style>
